<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from "vue-router"
import {type DrawerProps, message} from 'ant-design-vue';
import {defineProps, h} from "vue";
import {SearchOutlined} from "@ant-design/icons-vue";
import {postCurriculumQueryCurriculum, postSearchCourse} from "@/apis/student/modules/course";
import {postBlogQueryArticle, postModelQueryModel, postSearchModel} from "@/apis/student";
import {postSearchBlog} from "@/apis/student";

const router=useRouter()
const {searchType, placeholder} = defineProps({
  searchType: {
    required: true,
    type: String,
    default: '搜索内容'
  },
  placeholder: {
    type: String,
    default: '请输入'
  }
})

//抽屉显示位置设置，此处设置为自顶部显示
const placement = ref<DrawerProps['placement']>('top');
//初始控制抽屉打开与否的布尔值
const open = ref<boolean>(false);
//显示抽屉方法
const showDrawer = () => {
  open.value = true;
};
//抽屉关闭方法
const onClose = () => {
  open.value = false;
  searchedData.value = []
  searchValue.value = null
  spinning.value=false
};
//用户输入的值
const searchValue = ref<string|number|null>(null)
//加载状态响应，ture为加载中
const spinning = ref<boolean>(false)
//搜索数据数组
const searchedData = ref<Array<any>>([])
// interface DataItem {
//   title: string;
// }
// const data: DataItem[] = Array.from({length:100},(i)=>({title: `title: 'Ant Design Title ${i}`}))
// //点击搜索按钮获取输入数据，发送请求进行数据请求
// let searchCourse:any;
const handelClickSearch = async () => {
  if (!searchValue.value) {
    message.warning('暂无搜索内容',1)
    return
  }
  spinning.value = true
  let res:any = null
  switch (searchType) {
    case '课程搜索':
      try {
        res = await postCurriculumQueryCurriculum({
          curriculumName:searchValue.value,
          curriculumNode:searchValue.value,
          curriculumType:searchValue.value})
      }catch (e) {
        spinning.value=false
      }
      break
    case '文章搜索':
      try {
        res = await postBlogQueryArticle({
          articleContent:searchValue.value,
          articleIntro:searchValue.value,
          articleName:searchValue.value
        })
      }catch (e) {
        spinning.value=false
      }
      break
    case '模型搜索':
      try {
        res = await postModelQueryModel({
          modelName:searchValue.value,
          modelEnglishName:searchValue.value,
          modelIntro:searchValue.value
        })
      }catch (e) {
        spinning.value=false
      }
      break
    default:
        break
  }
  if(res && res.status===200 && res.data){
    message.success(res?.data.length>0
            ?`搜索${ searchValue.value }相关共${res?.data.length}条结果`
            :'暂无搜索结果',
        1)
    searchedData.value = res.data
    searchedData.value = searchedData.value.map(item => (
        {
          title:item.curriculumName || item.articleName || item.modelName,
          content: item.curriculumType || item.articleIntro || item.modelIntro,
          cover:item.curriculumCover || item.articleCoverImg || item.modelCover,
        }
    ))
    searchValue.value=''
    spinning.value=false
    return
  }
  message.error('请求搜索失败，请检查网络是否故障',1)
  spinning.value=false
}
const goToPageClick = (page:any):void => {
  switch (searchType) {
    case '课程搜索':
      router.push('/read/'+page.title)
      break
    case '文章搜索':
      router.push('/read/'+page.title)
      break
    case '模型搜索':
      router.push('/model/'+page.title)
      break
    default:
      break
  }

}
</script>

<template>
  <a-button type="dashed" :icon="h(SearchOutlined)" @click="showDrawer">
    <slot></slot>
  </a-button>
  <a-drawer
      :width="500"
      :placement="placement"
      :open="open"
      @close="onClose"
      keyboard
  >
    <template #title>
      <a-input-search
          v-model:value="searchValue"
          :placeholder="placeholder"
          enter-button="点击搜索"
          @search="handelClickSearch"
          :loading="spinning"
      >
        <template #prefix>
          {{searchType}}
        </template>
      </a-input-search>
    </template>
    <a-spin :spinning="spinning" tip="Loading...">
      <a-list item-layout="horizontal" :data-source="searchedData">
        <template #renderItem="{ item }">
          <a-list-item class="hover-pointer" @click="goToPageClick(item)">
            <a-list-item-meta
                :description="item.content"
            >
              <template #title>
                <a href="https://www.antdv.com/">{{ item.title }}</a>
              </template>
              <template #avatar>
                <a-avatar :src="item.cover" />
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-spin>
  </a-drawer>
</template>

<style scoped lang="scss">

</style>
